<template>
    <div>
    <nav id="navHead">
            <span style="font-size:5vw;" @click="goHome" class="fa fa-angle-left nav-one"></span>
            <span class="nav-one"  >频道</span>
            <span @click="searchMenu" class="nav-one fa fa-search" ></span>
    </nav>
        <main>
            <channelContent></channelContent>
        </main>
        <popup :show-mask="false" v-model="searchShow" position="right" style="width:100vw;"
        >
          <search @searchgo='searchGo'>搜索</search>
        </popup>
    </div>
</template>

<script>
import search from './search.vue'
import channelContent from './channelContent'
export default {
    data() {
        return {
            searchShow:false
        }
    },
    methods: {
         goHome: function() {
        this.$emit("channelGo");
        $(".weui-tabbar").show();
    },
    searchMenu:function() {
      //  console.log('123')
        this.searchShow = true
        },
    searchGo:function() {
       // console.log('nihao')
        this.searchShow = false
    },
    discroll: function() {
        console.log(12111)
        var scroTop = document.documentElement.scrollTop || document.body.scrollTop
        var navHead = document.getElementById('demo')
         if(scroTop >=0.000000000000000000000000000000000000000000000000000000000000000000000000000000001) {
                navHead.style.position = 'fixed'
                navHead.style.backgroundColor = '#09bb07'
                 navHead.style.top = '0'
                 navHead.style.zIndex = '1000'
            }else {
                navHead.style.position = 'relative'
            }
        },
        ss:function() {
            var scroTop = document.documentElement.scrollTop || document.body.scrollTop
            console.log(scroTop)
        }
    },
    components:{
        search,
        channelContent
    },
    mounted() {
        window.onscroll = this.discroll 
        this.ss()
    }
}
</script>

<style scoped>
nav {
  width: 100vw;
  height: 15vw;
  background: #09bb07;
  color: white;
  font-size: 4.5vw;
  line-height: 15vw;
  padding: 0 3vw;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
    /* position: sticky;
    -webkit-position:sticky;
     z-index: 995;
      top: 0vw; */
}

</style>
